---
id: 62a115879a6d51422652cbfc
title: Step 11
challengeType: 0
dashedName: step-11
---

# --description--

In your role playing game, users will be able to track their stats, buy weapons, and fight monsters. Before you can continue with the interactive JavaScript portion of the game, you need to first create the HTML elements that will display the game information.

Crea quattro elementi `div` all'interno dell'elemento `#game`. Assegna loro i seguenti valori di `id`, in ordine: `stats`, `controls`, `monsterStats` e `text`.

# --hints--

Dovresti creare quattro nuovi elementi `div`.

```js
assert.equal(document.querySelectorAll('div')?.length, 5);
```

Dovresti assegnare a uno dei nuovi elementi `div` un `id` con il valore `stats`.

```js
assert.exists(document.querySelector('div#stats'));
```

Dovresti assegnare a uno dei nuovi elementi `div` un `id` con il valore `controls`.

```js
assert.exists(document.querySelector('div#controls'));
```

Dovresti assegnare a uno dei nuovi elementi `div` un `id` con il valore `monsterStats`.

```js
assert.exists(document.querySelector('div#monsterStats'));
```

Dovresti assegnare a uno dei nuovi elementi `div` un `id` con il valore `text`.

```js
assert.exists(document.querySelector('div#text'));
```

Dovresti mettere i nuovi elementi `div` nell'ordine corretto.

```js
function __t(a, b) {
  return document.querySelector(a)?.nextElementSibling?.getAttribute('id') === b;
}
assert(__t('div#stats','controls') && __t('div#controls','monsterStats') && __t('div#monsterStats','text'));
```

Dovresti inserire i nuovi elementi `div` all'interno dell'elemento `#game`.

```js
assert.equal(document.querySelector('#game')?.children?.length, 4);
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>RPG - Dragon Repeller</title>
    <script src="./script.js"></script>
  </head>
--fcc-editable-region--
  <body>
    <div id="game">
    </div>
  </body>
--fcc-editable-region--
</html>
```

```js
let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 0;
let fighting;
let monsterHealth;
let inventory = ["stick"];
```
